<template>
  <div class="header">
    <div class="header-left back-left"><i class="iconfont">&#xe624;</i></div>
    <div class="header-input header-input-search"><span class="iconfont">&#xe632;查找</span></div>
    <router-link to="/City">
    <div class="header-right">城市<i class="iconfont">&#xe65e;</i></div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: "HomeHeader"
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--1rem= html font-size=50px #00bcd4-->

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.header
  display :flex
  line-height: 1.86rem
  background:$bgcolor
  color :#fff
  .header-left
    margin-top :.2rem
    float:left
    .back-left
      font-size : .4rem
      text-align :center
  .header-input
    flex:1
    background :#fff
    border-radius: .2rem
    padding-left:.4rem
    margin:.2rem .2rem .2rem .2rem
  
    color :#ccc
    font-size : .5rem
  .header-right 
    margin-top :.2rem
    float:right
    text-align:center
</style>
